
<template>
  <div>
    <el-row class="search-row">
      <el-col :span="12">
        <el-input v-model="search" placeholder="输入物流线路搜索"></el-input>
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      :default-sort="{prop: 'id'}"
      :header-cell-style="{background: '#F7F7F7', fontWeight: 'bold'}"
      :cell-style="{padding: '8px 20px', borderBottom: 'none'}"
      style="width: 100%; margin-top: 20px;">
      <el-table-column
        prop="id"
        label="ID"
        width="70px">
      </el-table-column>
      <el-table-column
        prop="route"
        label="物流线路">
        <template slot-scope="scope">
          <div>{{scope.row.route}}</div>
          <div>{{scope.row.path}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="tel"
        label="电话">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
        label="操作"
        fixed="right"
        width="250px">
        <template slot-scope="scope">
          <div class="btn-group">
              <el-button size="small" type="primary" @click="edit(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="remove(scope.row)">删除</el-button>
              <el-button size="small" type="success" @click="toTop(scope.row)">置顶</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="total > 0"
      :total="total"
      :page-size="pageSize"
      :current-page.sync="currentPage"
      style="margin-top: 20px;"
      @current-change="handleCurrentChange">
    </el-pagination>
    <div style="padding: 20px 0;">
      <el-button type="success" @click="add">新增数据</el-button>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      title="编辑数据">
      <el-form :model="formData" label-width="80px">
        <el-form-item label="物流线路">
          <el-input v-model="formData.route"></el-input>
        </el-form-item>
        <el-form-item label="途径">
          <el-input v-model="formData.path"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="formData.tel"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="formData.address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      search: '',
      dialogVisible: false,
      formData: {
        id: '',
        route: '',
        path: '',
        tel: '',
        address: '',
      },
    }
  },
  created() {
    this.getTableData()
  },
  
  methods: {
    getTableData() {
      const url = 'http://localhost:3000/data'
      const params = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        search: this.search,
      }
      this.axios.get(url, { params: params }).then((res) => {
        this.tableData = res.data.list
        this.total = res.data.total
      })
    },
    searchTableData() {
      this.currentPage = 1
      this.getTableData()
    },
    edit(data) {
      this.dialogVisible = true
      this.formData = Object.assign({}, data)
    },
    save() {
      const url = 'http://localhost:3000/save'
      if (this.formData.id) {
        this.axios.put(url, this.formData).then(() => {
          this.dialogVisible = false
          this.getTableData()
        })
      } else {
        this.axios.post(url, this.formData).then(() => {
          this.dialogVisible = false
          this.getTableData()
        })
      }
    },
    add() {
      this.dialogVisible = true
      this.formData = {
        id: '',
        route: '',
        path: '',
        tel: '',
        address: '',
      }
    },
    remove(data) {
      const url = 'http://localhost:3000/remove'
      const id = data.id
      this.axios.delete(`${url}/${id}`).then(() => {
        this.getTableData()
      })
    },
    toTop(data) {
      const url = 'http://localhost:3000/top'
      this.axios.put(url, { id: data.id }).then(() => {
        this.getTableData()
      })
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getTableData()
    },
  },
  watch: {
    search(val) {
      console.log(val)
      this.searchTableData()
    },
  },
  
}
</script>

<style>
  .btn-group {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>